<template>
	<view class="scernic-max">
		<NavBarTap :title="jingqu.scenicName" />
		<view class="scernic-image" v-if="isShowImage != 0">
			<image :src="jingqu.imgs[0].resourceUrl"></image>
		</view>
		<!-- 视频 -->
		<view class="scernic-video" v-else-if="jingqu.videos != ''">
			<video :src="jingqu.videos[0].resourceUrl" style="width:100%;height:100%;"></video>
		</view>
		<!-- 介绍 -->
		<view class="scernic-introduce">
			<view class="scernic-title">{{jingqu.scenicName}}</view>
			<view class="scernic-content">
				<u-parse :content="jingqu.content"></u-parse>
			</view>
		</view>
		<view class="scernic-unavailable" v-if="jingqu.content == null && jingqu.videos != '' && isShowImage != ''">
			<view class="loadding-box">
				<image class="loadding-icon" :src="imageUrl + '/43212.gif'" mode=""></image>
				<view class="loadding-text">内容努力加载中...</view>
			</view>
		</view>
		<view class="scernic-img" v-if="jingqu.videos == '' && jingqu.content == null && jingqu.scenicName == null">
			<image :src="imageUrl + '/vrTravel/anticipation.png'" mode="widthFix"
				style="width:467rpx;height:467rpx;margin-top:432rpx;"></image>
		</view>
	</view>
</template>

<script>
	import {
		voteSubmitDetail
	} from "@/api/detailsInterface/index.js"
	import NavBarTap from '@/components/NavBarTap.vue'
	export default {
		components: {
			NavBarTap
		},
		data() {
			return {
				orderId: '',
				jingqu: '',
				imageUrl: this.$imageUrl,
				isShowImage: null
			};
		},
		onLoad() {
			this.orderId = this.$Route.query.orderId
			this.voteSubmitDetail()
		},
		methods: {
			voteSubmitDetail() {
				voteSubmitDetail(this.orderId).then((res) => {
					if (res?.code == 200) {
						this.jingqu = res.data
						this.isShowImage = this.jingqu.imgs.length
					}
				})
			}
		}
	}
</script>

<style>
	.nav-center-title {
		color: #333333;
		font-size: 30rpx;
	}
</style>
<style lang="scss">
	.scernic-max {
		width: 100vw;
		height: 100vh;
	}

	.scernic-video {
		width: 100%;
		height: 494rpx;
	}

	.scernic-image {
		width: 100%;
		height: 494rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.scernic-introduce {
		padding: 28rpx 26rpx;

		.scernic-title {
			color: #000000;
			font-size: 32rpx;
			font-weight: bold;
		}

		.scernic-content {
			color: #333333;
			font-size: 28rpx;
			margin-top: 16rpx;
		}
	}

	.scernic-unavailable {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		color: #000000;
		font-size: 32rpx;
		background-color: #fff;

		.loadding-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.loadding-icon {
			width: 344rpx;
			height: 344rpx;
		}

		.loadding-text {
			font-size: 24rpx;
			color: #999999;
			text-align: center;
		}
	}

	.scernic-img {
		display: flex;
		// align-items: center;
		justify-content: center;
	}
</style>